<template>
  <div>
    <img :src="fullReduction" alt="" style="width:100%;height:260px" />
    <el-tabs v-model="comName" @tab-click="handleClick">
      <el-tab-pane label="所有活动" name="ActivityLists"></el-tab-pane>
      <el-tab-pane label="活动说明" name="ActivityExplain"></el-tab-pane>
    </el-tabs>
    <component :is="comName"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ActivityLists from "./ActivityLists/Index.vue";
import ActivityExplain from "./ActivityExplain.vue";
import fullReduction from "@/assets/images/fullReduction.jpg";

@Component({
  components: {
    ActivityLists,
    ActivityExplain,
  },
})
export default class FullIndex extends Vue {
  comName = "ActivityLists";

  fullReduction: string = fullReduction;

  handleClick(tab) {
    this.comName = tab.name;
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #f5f5f5;
  z-index: 1;
}
</style>
